<template>

	<view class="content">
		<!-- 搜索栏 -->
		<view class="search-result">
			<uni-search-bar type="text" v-model="searchValue" bgColor=" #a1f1f1" placeholder="请输入搜索内容"
				@input="onSearchInput" />
				<!-- 导航栏 -->
				<view class="nav-bar">
					<text class="nav-button" @tap="navigateToPage1">查询通过</text>
					<text class="nav-button  a" @tap="navigateToPage2">查询考虑</text>
					<text class="nav-button  b" @tap="navigateToPage3">查询初审</text>
				</view>
		</view>
		
		<!-- 面试情况 -->
		<view class="bian">
			<uni-list>
				<uni-list :border="true">
					<!-- 显示圆形头像 -->
					<uni-list-chat :avatar-circle="true" title="面试人员姓名"
						avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="面试的岗位,点击查看详情"
						time="2020-02-02 20:20"></uni-list-chat>
				</uni-list>
			</uni-list>


		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	//初始属性
	const searchValue = ref('');
	const avatarList = ref([{
		url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
	}, {
		url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
	}, {
		url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
	}])
	//搜索栏js
	const onSearchInput = () => {
		// 处理搜索输入变化的逻辑
		console.log('搜索内容：', searchValue.value);
	};
	//导航js
	const navigateToPage1 = () => {
		uni.navigateTo({
			url: '/pages/page1/index'
		});
	};

	const navigateToPage2 = () => {
		uni.navigateTo({
			url: '/pages/page2/index'
		});
	};

	const navigateToPage3 = () => {
		uni.navigateTo({
			url: '/pages/page3/index'
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;

		//外边框
		.bian {
			border: 2px solid black;
		}

		//搜索栏
		.search-result {
			padding-top: 10rpx;
			padding-bottom: 20rpx;
			text-align: center;
			background-color: #99e6e6;

			.search-result-text {
				text-align: center;
				font-size: 14rpx;
				color: #666;
			}

			.example-body {
				/* #ifndef APP-NVUE */
				display: block;
				/* #endif */
				padding: 0rpx;
			}

			.uni-mt-10 {
				margin-top: 10rpx;
			}
		}

		//招聘

		.chat-custom-right {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;

			.chat-custom-text {
				font-size: 12rpx;
				color: #999;
			}
		}

		//导航栏样式
		.nav-bar {
			height: 65rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.nav-button {
				font-size: 40rpx;
				background-color: #09f5f5;
				width: 10%;
				margin: 20rpx;
				color: #333;
				cursor: pointer;
				flex: 1;
				text-align: center;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.b {
				background-color: #aaff7f;
			}
			
			.a {
				background-color: #b3ffe6;
			}
		}


	}
</style>